import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
export default class List extends Component {
    state = {
        //初始化状态
        users: [],
        isFrist: true, //是否是第一次打开页面
        isLoading: false, //标识是否处于加载中
        err: "", //存储请求相关的错误信息
      };
      //初始化组件
      componentDidMount(){
          //订阅消息
     this.token=PubSub.subscribe('atguigu',(_,stateObj)=>{
            console.log('list组件收到收据了',stateObj);
            this.setState(stateObj);
        })
      }
      //销毁组件
      componentWillUnmount(){
          PubSub.unsubscribe(this.token)
      }
    render() {
        const {users,isFrist,isLoading,err}=this.state;
        return (
           
                 <div className="row">
                        {
                        //判断 状态。利用三元符号去处理
                        isFrist? <h2>欢迎使用，随后点击搜索</h2>:isLoading?<h2 style={{color:'red'}}>Loading.....</h2 >:err?<h2>{err}</h2>:
                        users.map((item,index)=>{
                            return <div className="card" key={item.id}>
                            <a href={item.html_url} target="_blank" rel="noreferrer">
                                <img
                                alt="head_port"
                                src={item.avatar_url}
                                style={{ width: "100px" }}
                                />
                            </a>
                            <p className="card-text">{item.login}</p>
                            </div>
                        })}      
                 </div>
        
            
        )
    }
}
